<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>admin</title>
	<link rel="stylesheet" href="">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/admin.css">
   <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css" rel="stylesheet">
   <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
   <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.3/js/language/zh_CN.min.js"></script>
   <style type="text/css">
   .tdvalign{
    vertical-align:middle !important;
   }
   </style>
</head>
<body>
<!-- <?php $html="<script>alert(454545);</script>"; ?>
{{$html}} -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading panel-heading-custom">
                        <h3 class="panel-title panel-title-custom">
                        {!!Request::get('keyword')?'<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 关键字<code>'.Request::get('keyword').'</code>搜索结果':'<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 商品列表'!!}
                         <span style="float:right">
                            <form class="navbar-form panel-form" method="get" action="/dashboard/item">
                                <input type="text" id="keyword"  name="keyword"  value="" class="form-control" placeholder="请输入商品名称">
                                <button id="search_btn" onclick="turnPage(1);" class="btn btn-info" data-loading-text="提交中..." type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查询</button>
                                <button type="button" onclick="addBox();" class="btn btn-primary">添加</button>
                                <button type="button" onclick="addItemBox(2);" class="btn btn-primary">添加商品属性</button>
                            </form>
                        </span>
                        </h3>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>商品名称</th>
                                <th>所属分类</th>
                                <th>单价(元)</th>
                                <th>库存</th>
                                <th>创建时间</th>
                                <th>更新时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        @forelse ($items as $info)
                        <tr>
                            <td><span data-toggle="tooltip" data-placement="bottom" title="{{$info->name}}">{{str_limit($info->name,20)}}</span></td>
                            <td><span data-toggle="tooltip" data-placement="bottom" title="{{$info->cname}}">{{str_limit($info->cname,20)}}</span></td>
                            <td><span style="color:red;">￥</span>{{$info->price/100}}</td>
                            <td>{{$info->stock}}</td>
                            <td>{{$info->created_at}}</td>
                            <td>{{$info->updated_at}}</td>
                            <td>
                                <div class="btn-group btn-group-xs" role="group" aria-label="...">
                                <a href="javascript:void(0);"  onclick="iteminfo();" class="btn btn-primary">推荐商品</a>
                                </div>
                            </td>
                        </tr>
                        @empty
                            <tr>
                                <td colspan="4" style="text-align: center">暂无数据</td>
                            </tr>
                       @endforelse
                        </tbody>
                    </table>   
                    </div> 
                    <div class="panel-footer">
                        <span style="float:left" class="text-left">共 {{$items->count()}} 条信息</span>
                        <span style="float: right" class="text-right">{!!$items->appends(['keyword' => Request::get('keyword'),'type'=>Request::get('type')])->render() ?: '暂无分页'!!}</span>
                        <div class="clearfix "></div>
                     </div>
                </div>
            </div>    
        </div>    
    </div>
    <div id="addBox" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form id="addfrm" method="post" action="/admin/add">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增商品</h4>
                    </div>
                    <div class="modal-body">
                         <div class="form-group">
                            <label for="recipient-name" class="control-label">用户名:</label>
                            <input type="text" name="pname"  class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">电话:</label>
                            <input type="text" name="mobile"  class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" id="addBtn"  class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" style="margin-top: 10%;">
        <div class="modal-dialog" role="document">
            <form id="editfrm">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <input type="hidden" id="infoid" name="id" value="2323">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">@{{message.substring(0,4)}}</h4>
                    </div>
                    <div class="modal-body">
	                      <div class="table-responsive">
	                        <table class="table table-hover">
	                        <thead>
	                            <tr>
		                            <th>ID</th>
	                                <th>商品名称</th>
	                                <th>库存</th>
	                                <th>发布时间</th>
                                  <th>操作</th>
	                            </tr>
	                        </thead>
	                        <tbody>
		                        <tr v-cloak v-for="(item,index) in itemInfo">
		                            <td>@{{item.id}}</td>
		                            <td>@{{item.name}}</td>
		                            <td>@{{item.num}}</td>
                                <td>@{{item.created_at}}</td>
		                            <td>
                                <a @click="editInfo(item);" class="btn btn-default">编辑</a>
                                <a @click="addInfo();" class="btn btn-default">增加</a>
                                <a @click="delInfo(index)" class="btn btn-primary">删除</a>
                                </td>
		                        </tr>
		                        <tr>
		                           <td colspan="3">
		                           <button type="button" @click="prePage();" class="btn btn-default">上一页</button>
		                           <button type="button" @click="nextPage();" class="btn btn-default">下一页</button>
		                           </td>
		                        </tr>
	                        </tbody>
	                      </table>
	                    </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" id="edit_btn" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

        <div id="myModal2" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form id="itemBox">
                <input type="hidden" name="_token" value="{{csrf_token()}}">
                <input type="hidden" id="itemid" name="id" value="">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">添加商品属性</h4>
                    </div>
                    <div class="modal-body" style=" max-height:460px;overflow-y:auto;">
                        <div class="table-responsive">
                        <table class="table" style="width: 100%;">
                          <thead>
                            <tr>
                                <th style="width: 20%;">属性</th>
                                <th style="width: 80%;">属性值</th>
                            </tr>
                          </thead>
                           <tbody>
                            <tr>
                                <td><input type="checkbox" class="selectAll" data-text="颜色">颜色</td>
                                <td>
                                     <input type="checkbox" class="property" value="1" data-text="红色">红色&nbsp;
                                     <input type="checkbox" class="property" value="2" data-text="黑色">黑色&nbsp;
                                     <input type="checkbox" class="property" value="3" data-text="白色">白色&nbsp;
                                </td>
                            </tr>
                             <tr>
                                <td><input type="checkbox" class="selectAll" data-text="尺码">尺码</td>
                                <td>
                                     <input type="checkbox" class="property" value="100" data-text="39">39&nbsp;
                                     <input type="checkbox" class="property" value="101" data-text="40">40&nbsp;
                                     <input type="checkbox" class="property" value="102" data-text="41">41&nbsp;
                                </td>
                            </tr>
                             <tr>
                                <td><input type="checkbox" class="selectAll" data-text="款式">款式</td>
                                <td>
                                     <input type="checkbox" class="property" data-text="长款" value="1000">长款&nbsp;
                                     <input type="checkbox" class="property" data-text="中长款" value="1001">中长款&nbsp;
                                     <input type="checkbox" class="property" data-text="短款" value="1002">短款&nbsp;
                                </td>
                            </tr>
                           </tbody>
                        </table>
                         <button type="button" id="sku_btn" class="btn btn-primary">生成SKU</button>
                          <table id="proDataTable" class="table">
                          </table>
                      </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" id="addItem_btn" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
<script>
$("#addItem_btn").click(function(event) {
  $.post('/admin/property', $("#itemBox").serialize(), function(data, textStatus, xhr) {
    console.log(data);
  });
});
//全选
$(".selectAll").click(function(event) {
  $(this).parents('tr').find("input.property").prop('checked', $(this).prop('checked'));
});
//子选框与复选框同步变化
$("input.property").click(function(event) {
  var flag=$(this).prop('checked');
  if(flag){
    var childern=$(this).parents('tr').find("input.property");
    var checkAllFlag=true;
    $.each(childern, function(index, val) {
      if(!childern.eq(index).prop('checked')){checkAllFlag=false;return false;}
    });
    if(checkAllFlag){
        $(this).parents('tr').find('.selectAll').prop('checked',true);
     }
  }
  else {
    $(this).parents('tr').find('.selectAll').prop('checked',false);
  }
});
//删除
function del(obj){
  if(confirm('您确认删除吗？')){
    $(obj).parents('tr').eq(0).remove();
   }
}
$("#sku_btn").click(function(){
  var pnum=$("input.property:checked").length;
  var pro=[];
  if(pnum>0)
  {
    var selectAll=$("input.selectAll");
    $.each(selectAll, function(index, val) {
       var obj=selectAll.eq(index).parents('tr').find("input.property:checked");
       var len=obj.length;
       if(len>0)
       {
           var arr=[];
           var fieldText=selectAll.eq(index).parents('tr').find('.selectAll').data('text');
            $.each(obj, function(index, val) {
               arr.push({field:fieldText,key:obj.eq(index).val(),value:obj.eq(index).data('text')});
            });
           pro.push(arr);
       }
    });
    var price=100;
    if(pro.length>=1&&pro.length<=3){createTableHtml(pro,price,true);}
    else if(pro.length>3){alert('属性最多选择三项');}
  }
  else {alert('属性至少选择一项');}
});

function createTableHtml(obj,price,flag){
  console.log(obj);
  console.log(obj[0][0]);
  console.log(obj[0].length);
  if(obj.length>=1&&obj.length<=3)
  {
    //创建头部
    var html="<thead><tr><th>序号</th>";
    if(obj.length>=1){
      html+="<th>"+obj[0][0].field+"</th>";
    }
    if(obj.length>=2){
      html+="<th>"+obj[1][0].field+"</th>";
    }
    if(obj.length==3){
      html+="<th>"+obj[2][0].field+"</th>";
    }
    html+="<th>库存</th><th>售价</th>";
    if(!flag){
       html+="<th>操作</th>";
    }
    html+="</tr></thead>";
    //创建表格
    html+="<tbody>";
    var order=1;
    function createStartHtml(order){
     return '<tr><td>'+order+'</td>';
    }
    function createEndHtml(order)
    {
       var html='<td><input type="text" minlength="1" maxlength="6" onkeyup="this.value=this.value.replace(/[^0-9]/g,\'\')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,\'\')" style="width:80px;" name="num[]" value="1"></td>'
                +'<td><input type="text" minlength="1" maxlength="6" onkeyup="this.value=this.value.replace(/[^0-9]/g,\'\') " onafterpaste="this.value=this.value.replace(/[^0-9]/g,\'\')" style="width:80px;" name="price[]" value="'+price+'"></td>';
                if(!flag){
                html+='<td><input type="button" class="btn btn-default" value="删除" onclick="del(this);"></td>';
              }
              html+="</tr>";
      return html;
    }
    $.each(obj[0], function(index, val) {
      if(obj.length==1)
      {
         html+=createStartHtml(order);
         html+='<td><input type="hidden" name="property[]" value="'+val.key+'"/>'+val.value+'</td>';
         html+=createEndHtml(order);
         order++;
      }
      else if(obj.length==2)
      {
        $.each(obj[1], function(index, val2) {
          var propertyStr=val.key+","+val2.key;
          html+=createStartHtml(order);
          //不合并相同属性
          if(!flag){
          html+='<td><input type="hidden" name="property[]" value="'+propertyStr+'"/>'+val.value+'</td>';
         }
          //合并相同属性
          if(flag&&index==0)
          {
            html+='<td  class="tdvalign" rowspan="'+obj[1].length+'"><input type="hidden" name="property[]" value="'+propertyStr+'"/>'+val.value+'</td>';
          }
          html+='<td>'+val2.value+'</td>';
          html+=createEndHtml(order);
          order++;
        });
      }
      else if(obj.length==3)
      {
        $.each(obj[1], function(index2, val2) {
           $.each(obj[2], function(index3, val3) {
            var propertyStr=val.key+","+val2.key+","+val3.key;
            html+=createStartHtml(order);
            if(!flag){
                 html+='<td><input type="hidden" name="property[]" value="'+propertyStr+'"/>'+val.value+'</td>';
             }
             if(flag&&index2==0&&index3==0){
               html+='<td  class="tdvalign"  rowspan="'+(obj[1].length*obj[2].length)+'"><input type="hidden" name="property[]" value="'+propertyStr+'"/>'+val.value+'</td>';
             }
              if(!flag){
                html+='<td>'+val2.value+'</td>';
              }
               if(flag&&index3==0){
                 html+='<td  class="tdvalign" rowspan="'+obj[2].length+'">'+val2.value+'</td>';
               }
            html+='<td>'+val3.value+'</td>';
            html+=createEndHtml(order);
            order++;
          });
        });
      }
    });
     html+="</tbody>";
    $("#proDataTable").html(html);
  }
}

function addItemBox(id){
   $("#itemid").val(id);
   $("#itemBox")[0].reset();
   $("#proDataTable").html('');
   $("#myModal2").modal();
}

// modal框提交
$("#addBtn").click(function () {
        //进行表单验证
        var form=$('#addfrm');
        var bv = form.data('bootstrapValidator');
        bv.validate();
        if (bv.isValid()) {
           // Use Ajax to submit form data
            $.post(form.attr('action'), form.serialize(), function(result) {
                console.log(result);
                $('#addBox').modal('hide');
                //window.location.reload();
            }, 'json');
        }
        form.find('.has-error').eq(0).find('input').eq(0).focus();
        return false;
    });
$(document).ready(function() {
        $('#addfrm').bootstrapValidator({
/*            err: {
                   container: 'tooltip'
                },*/
            autoFocus:true,
            message: 'This value is not valid',
           /* container: 'tooltip',
            trigger: 'blur',*/
           feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
                pname: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]{6,20}$/,
                            message: '用户名只能包含字母、数字和下划线,长度6-20'
                        }
                    }
                },
                 mobile: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        },
                        phone: {
                            country:'CN',
                            message: '电话号码格式不正确'
                        }
                    }
                }
            }
        });

	function getdata(){
	  axios.post('/admin/item',{"pageNum":pageNum,"pageSize":pageSize,"_token":"{{csrf_token()}}"})
      .then(response=>{
      	console.log(response.data);
      	vm.itemInfo=response.data.items;
      	totalCount=response.data.count;
      	console.log(vm.itemInfo);
      })
      .catch(function(error){
			console.log(error);
      });
	}
	var pageNum=1,pageSize=5,totalCount=0;
	var vm=new Vue({
	  el: '#myModal',
	  data: {
	    message: '商品列表',
	    itemInfo:[]
	  },
	  mounted(){
	  	pageNum=1;
	  	getdata();
	  },
	  methods:{
	  	nextPage:function(){
	  	 if(pageNum==totalCount)
  		 {
  			alert('已经是最后一页了');
  			return false;
  		 }
	  		pageNum++;
            getdata();
	  	},
	  	prePage:function(){
  		 if(pageNum==1)
  		 {
  			alert('已经是第一页了');
  			return false;
  		 }
  		 pageNum--;
         getdata();
	  	},
      delInfo:function(index){
        /*alert($("#infoid").val());*/
        this.itemInfo.splice(index,1);
      },
      addInfo:function(){
        this.itemInfo.push({
          'id':"<?php echo time();?>",
          'name':'测试',
          'num':1,
          "created_at":"<?php echo date('Y-m-d H:i:s',time());?>"
        });
      },
      editInfo:function(item){
        item.name=66888;
      }
	  }
	})
});
  $('[data-toggle="tooltip"]').tooltip();
  function iteminfo() {
      $('#myModal').modal();
  }
  function addBox(){
    $('#addBox').modal();
  }
</script>
<!-- <body>
<ul class="dropdown-menu" role="menu">
	<li>
	    <a href="/admin/logout"
	        onclick="event.preventDefault();
	                 document.getElementById('logout-form').submit();">
	        Logout
	    </a>

	    <form id="logout-form" action="/admin/logout" method="POST" style="display: none;">
	        {{ csrf_field() }}
	    </form>
	</li>
</ul>
<div id="app">
    <div v-html="message"></div>
</div> -->
	
<!-- <script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script> -->
	<!-- admin {{Auth::guard('admin')->user()}}<br/> -->

<!-- @role('agent','admin')
    I am a agent!
@else
    I am not a agent...
@endrole -->
<!-- </body>
</html> -->